@import '../base/config.less';

.@{name} {
	
	&-page-section {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;

		img {
			max-width: 100%;
		}
	}

	&-container {
		flex: 1;
		height: auto;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}

	&-footer {
		display: flex;
		height: rem(101);
		padding-top: rem(18);
		background: #f5f5f5;
		border-top: 1px solid #cacaca;
		
		a {
			flex: 1;
			height: 100%;
			text-align: center;
			color: #6c6c6c;
			font-size: rem(18);
		}

		span {
			display: block;
			height: rem(40);
			margin-bottom: rem(11);
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
		}

		.@{name}-icon {
			&-home {
				background-image: url('../images/common/icon-home.png');
			}

			&-cart {
				background-image: url('../images/common/icon-cart.png');
			}

			&-member {
				background-image: url('../images/common/icon-member.png');
			}
		}

		a.active {
			color: @main;

			.@{name}-icon {
				&-home {
					background-image: url('../images/common/icon-home-a.png');
				}

				&-cart {
					background-image: url('../images/common/icon-cart-a.png');
				}

				&-member {
					background-image: url('../images/common/icon-member-a.png');
				}
			}
		}
	}

}